//选择
let select = document.querySelector("select");
let option = document.querySelector("option");
//场次
let sesstion = document.querySelector(".sesstion");
let sesstionList = document.querySelector(".sesstion_list");
//状态
let status = document.querySelector(".status");
let statusList = document.querySelector(".status_list");

// 获取传来过的token
let token = sessionStorage.getItem("token");
let data = { "token": token };
let url = "http://newshopapi.0melon0.cn/api/f_user/chooselist";

// 请求数据
ajax(url, data, "GET").then(res => {
    // console.log(res.result.list);
    res.result.list.forEach(item => {
        select.innerHTML += `<option>${item.day_time}</option>`
    });
});

// 清空上次内容
select.innerHTML = '';
select.innerHTML = "<option>-请选择日期-</option>";

// 下拉框change事件
select.addEventListener("change", () => {
    // 清空场次、状态
    sesstionList.innerHTML = '';
    statusList.innerHTML = '';

    // 获取参数
    console.log(select.value);
    let url = "http://newshopapi.0melon0.cn/api/f_user/chooseday";
    let data = { "token": token, "day_time": select.value };

    // 请求数据
    ajax(url, data, "GET").then(res => {
        console.log(res);
        console.log(res.result.list);

        //提取二维码需要的day_time: "2021-10-30", show_id: 1, show_name: "09:00-12:00"
        let day_time_arr = [];
        let show_id_arr = [];
        let show_name_arr = [];

        res.result.list.forEach(item => {
            console.log(item); //测试{day_time: "2021-10-30", show_id: 1, show_name: "09:00-12:00"}

            // 渲染左边预约时间
            sesstionList.innerHTML += `<p>${item.show_name}</p>`;

            //右边时间段
            // 获取各个时间段的时间戳
            console.log(item.day_time + " " + item.show_name.substr(0, 5)); //测试2021-10-31 14:30

            let minTime = new Date(item.day_time + " " + item.show_name.substr(0, 5)).getTime();

            let nowTime = new Date().getTime();

            // 判断时间戳
            if (nowTime < minTime) {
                // 渲染右边状态
                statusList.innerHTML += `<p style="color:green">可预约</p>`
            } else {
                statusList.innerHTML += `<p style="color:red">不可预约</p>`
            }


            // 预约好的时间日期id存进数组
            show_id_arr.push(item.show_id);
            day_time_arr.push(item.day_time);
            show_name_arr.push(item.show_name);
            console.log(show_name_arr); //测试
        })

        // 获取p标签
        let pList = statusList.querySelectorAll("P");
        pList.forEach((item, index) => {
            item.addEventListener("click", (event) => {
                if (event.target.innerHTML == "可预约") {
                    // 把show.id取出来，并存到session
                    show_id = show_id_arr[index];
                    day_time = day_time_arr[index];
                    show_name = show_name_arr[index];
                    console.log(show_name);

                    // 把参数存到session
                    sessionStorage.setItem("show_id", show_id);
                    sessionStorage.setItem("day_time", day_time);
                    sessionStorage.setItem("show_name", show_name);
                    sessionStorage.setItem("token", token);
                    location.href = '3QRcode.html'
                }
            })
        })
    })
})